/**
 * 用户登录
 */


import React from "react";
import { Button, Input, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { inject, observer } from 'mobx-react';
import TestStore from '../../store/testStore';
import { HomePageLink } from "../../Layout/router";
import './index.less'

const v = require('./../../assets/video.mp4');

@inject('testStore')
@observer
class Login extends React.Component<{} & { testStore: TestStore }, {}> {

  user: String
  password: String

  constructor(props: {} & { testStore: TestStore }) {
    super(props);
    this.user = ''
    this.password = ''
  }

  componentDidMount() {
    console.log(this.props.testStore.title)

  }
  public inputUserChange = (e: any) => {
    this.user = e.target.value
  }

  public inputPassWordChange = (e: any) => {
    this.password = e.target.value
  }

  public onClickLogin = () => {
    if (this.user === '123' && this.password === '456') {
      message.info('登录成功')
      window.location.href = HomePageLink
    } else {
      message.error('登录错误！')
    }
    
  }

  render() {
    return (
      <div className="Login">
        <div className="form">
          <div className="left">
            <video src={v.default} muted loop autoPlay></video>
          </div>
          <div className="right">
            <div className="right-con" >
              <img className="loginlogo" alt="" />
              <Input
                size="large"
                prefix={<UserOutlined twoToneColor="#39adb5" />}
                placeholder="账号"
                onChange={(e) => {this.inputUserChange(e)}}
              />
              <div style={{ marginTop: 16 }}></div>
              <Input.Password
                size="large"
                prefix={<LockOutlined twoToneColor="#39adb5" />}
                placeholder="密码"
                onChange={(e) => {this.inputPassWordChange(e)}}
              />
              <Button
                type="primary"
                className="login-form-button"
                onClick={() => {this.onClickLogin()}}
              >
                登录
            </Button>

            </div>
          </div>
        </div>


      </div>

    )
  }
}


export default Login
